import {createApp} from 'vue'
import './style.css'
import App from './App.vue'
import myPlugin from '../src/components/plugin/index.js'

let app = createApp(App)

// 自定义指令
app.directive(
    'highlight',
    {
        mounted(el, binding, vnode, prenode) {
            console.log(el);
            console.log(binding);


            let delay = 0

            // 利用binding.modifiers获取delayed修饰符值进行判断 // 如果有此修饰符，则将delay值设置为3000
            if (binding.modifiers.delayed) {
                delay = 3000
            }

            console.log(delay);

            if (binding.modifiers.blink) {
                console.log("闪烁效果");
                // 至少两个以上的颜色交换才会产生闪烁效果
                let mainColor = binding.value.mainColor
                let secondColor = binding.value.secondColor

                console.log(mainColor);
                console.log(secondColor);

                let currentColor = mainColor

                setTimeout(
                    () => {
                        setInterval(
                            () => {
                                (currentColor === secondColor) ? (currentColor = mainColor) : (currentColor = secondColor)

                                if (binding.arg === "backgroundColor") {
                                    el.style.backgroundColor = currentColor
                                } else {
                                    el.style.color = currentColor
                                }
                            },
                            binding.value.delay
                        )
                    },
                    delay   // 再此时间范围内容闪烁
                )
            } else {
                setTimeout(
                    () => {


                        if (binding.arg === "backgroundColor") {
                            el.style.backgroundColor = binding.value.mainColor
                        } else {
                            el.style.color = binding.value.mainColor
                        }


                    },
                    delay   // 再此时间范围内容闪烁
                )
            }


        }
    }
)

app.directive('color', (el, binding) => {
    // 这会在 `mounted` 和 `updated` 时都调用
    el.style.color = binding.value
})


// 自定义指令，处理网站权限
app.directive(
    "permission",
    (el, binding, vNode, prevNode) => {
        let {arg, modifiers, value} = binding

        // 模拟用户数据权限
        const userRoles = ['admin']

        // value 是一个非空的数组
        if (value && (value instanceof Array) && value.length > 0) {
            // some 方法测试数组中是不是至少有一个元素通过了被提供的函数测试。
            const hasPermission = userRoles.some(role => value.includes(role))

            // 处理没有权限的情况
            if (!hasPermission) {
                // 将当前的元素进行删除
                el.parentNode && el.parentNode.removeChild(el)
            }
        } else {
            throw new Error("需要以字符串数字的形式设置权限，格式为： v-permission=['admin','root','editor']")
        }

    }
)

app.use(myPlugin, {
    small: 12,
    medium: 14,
    large: 36,
})
app.mount('#app')
